<template>
  <div class="home">
    <form action="/">
      <van-search placeholder="请输入搜索关键词" @focus="onSearch"></van-search>
    </form>
    <!-- 分类 -->
    <nav>
      <p>
        <span @click="all">全部</span>
        <span
          v-for="(item, index) in Fenlei"
          :key="index"
          @click="go(item,index)"
          :class="actived===index?'activee':''"
        >{{item.title}}</span>
      </p>
    </nav>
    <div class="sort">
      <span @click="zonghe">综合</span>
      <span @click="sortprice">价格</span>
    </div>
    <main v-show="show">
      <div v-for="(item, index) in list" :key="index">
        <img :src="item.pic" alt />
        <h4>{{item.title}}</h4>
        <p>
          <span>￥{{item.price}}</span>
          <van-icon name="cart-o" />
        </p>
      </div>
    </main>
    <main>
      <div v-for="(item, index) in listnav" :key="index">
        <img :src="item.pic" alt />
        <h4>{{item.title}}</h4>
        <p>
          <span>￥{{item.price}}</span>
          <van-icon name="cart-o" />
        </p>
      </div>
    </main>
  </div>
</template>

<script>
import axios from "axios";
export default {
  components: {},
  data() {
    return {
      nav: [],
      active: 0,
      show: true,
      actived: -1
    };
  },
  methods: {
    onSearch() {
      this.$router.push("/search");
    },
    all() {
      this.show = true;
    },
    go(item,index) {
      this.$store.dispatch("GET_id", item);
      this.show = false;
      this.actived=index
    },
    //价格排序
    sortprice(){
      this.$store.dispatch('get_SORTprice')
    },
    zonghe(){
      this.$store.dispatch('get_ZONGHE')
    }
  },
  computed: {
    Fenlei: function() {
      return this.$store.state.Fenlei;
    },
    list: function() {
      return this.$store.state.list;
    },
    listnav: function() {
      return this.$store.state.listnav;
    }
  },
  mounted() {
    this.$store.dispatch("GET_FENLEI");
    this.$store.dispatch("GET_LIST");
  }
};
</script>

<style scoped>
nav {
  width: 100%;
  overflow-x: scroll;
}
span {
  display: inline-block;
  margin: 0 20px;
}
nav p {
  width: 220%;
}
main {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
main div {
  width: 47%;
}
main div img {
  width: 100%;
}
main div p {
  display: flex;
  justify-content: space-between;
  font-size: 20px;
}
h4 {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.activee {
  color: red;
}
.sort{
  display: flex;
  justify-content: space-around;
}
.sort span{
  margin: 10px;
}
</style>
